<template>
  <div id="app">
    <!-- Cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择 -->
    <el-cascader
    :options="options"
    v-model="values"
    @change="change"
    >

    </el-cascader>
  </div>

</template>

<script>
export default {

  data() {
    return {
      values:[],
      options:[
        {
          value:'1',
          label:'番剧',
          children:[
            {
              value:'1-1',
              label:'10月新番',
              children:[
                {
                  value:'1-1-1',
                  label:'咒术回战',
                },
                {
                  value:'1-1-2',
                  label:'魔女之旅',
                },
                {
                  value:'1-1-3',
                  label:'成神之日',
                }
              ]
            },
            {
              value:'1-2',
              label:'7月新番',
            },
            {
              value:'1-3',
              label:'4月新番',
            }
          ]
        },
        {
          value:'2',
          label:'影视',
        },
        {
          value:'3',
          label:'游戏',
        },
      ]
    }
  },
  name: "App",
  components: {},
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>

<style lang="less" scoped>
</style>
